<template>
  <div style="background: #202B61;width: 100%;height: 100%;">
    <div style="top: 1%; width: 100%;height: 90vh;float: left;position: absolute;">

      <div class="box1">
        <el-form :model="form" :inline="true" style="float: left;margin-top: 1vh;margin-left: 2vh;">
          <el-form-item label="运行模式">
            <el-radio-group v-model="form.runmode">
              <el-radio-button label="热跟踪模式"></el-radio-button>
              <el-radio-button label="电跟踪模式"></el-radio-button>
              <el-radio-button label="优化运行"></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-button style="float: right;margin-top: 1vh;margin-right: 5vh;" type="primary" @click="save">保存</el-button>
      </div>
      <div class="box2">
        <div class="header">运行参数</div>
        <div>
          <el-row style="width: 100%;margin: 1vh auto;display: inline-flex;">
            <el-col :span="12">
              <table>
                <tr class="1">
                  <th colspan="2">负荷变化率</th>
                </tr>
                <tr class="2">
                  <td>最大允许过载率(%)</td>
                  <td><input v-model="overload" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>最大允许缺载率(%)</td>
                  <td><input v-model="lackload" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>最大允许过热率(%)</td>
                  <td><input v-model="overheat" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>最大允许缺热率(%)</td>
                  <td><input v-model="lackheat" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>最大允许过冷率(%)</td>
                  <td><input v-model="overcool" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>最大允许缺冷率(%)</td>
                  <td><input v-model="lackcool" placeholder="- -"></td>
                </tr>
              </table>
            </el-col>
            <el-col :span="12">
              <table style="height: 20vh;">
                <tr>
                  <th colspan="3">负荷迁移</th>
                </tr>
                <tr>
                  <td>电荷迁移</td>
                  <td>
                    <select v-model="electricIsAllowed" @change="change">
                      <option value="false">不允许</option>
                      <option value="true">允许</option>
                    </select>
                  </td>
                  <td>迁移率:<input v-model="electricMobility" :disabled="electricInput" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>热荷迁移</td>
                  <td>
                    <select v-model="heatIsAllowed" @change="change">
                      <option value="false">不允许</option>
                      <option value="true">允许</option>
                    </select>
                  </td>
                  <td>迁移率:<input v-model="heatMobility" v-bind:disabled="heatInput" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>冷荷迁移</td>
                  <td>
                    <select v-model="coldIsAllowed" @change="change">
                      <option value="false">不允许</option>
                      <option value="true">允许</option>
                    </select>
                  </td>
                  <td>迁移率:<input v-model="coldMobility" v-bind:disabled="coldInput" placeholder="- -"></td>
                </tr>
              </table>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="box2">
        <div class="header">环境参数</div>
        <div>
          <el-row style="width: 100%;margin: 1vh auto;display: inline-flex;">
            <el-col :span="8">
              <table>
                <tr>
                  <th colspan="2">发电</th>
                </tr>
                <tr>
                  <td>碳粉尘（kg/kWh)</td>
                  <td><input v-model="electricCarbonDust" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>二氧化碳（kg/kWh)</td>
                  <td><input v-model="electricCO2" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>二氧化硫（kg/kWh)</td>
                  <td><input v-model="electricSO2" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>氮氧化物（kg/kWh)</td>
                  <td><input v-model="electricNO" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>PM2.5（kg/kWh)</td>
                  <td><input v-model="electricPM25" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>等效植树（棵/kWh)</td>
                  <td><input v-model="electricTreePlanting" placeholder="- -"></td>
                </tr>
              </table>
            </el-col>
            <el-col :span="8">
              <table>
                <tr>
                  <th colspan="2">供热</th>
                </tr>
                <tr>
                  <td>碳粉尘（kg/kWh)</td>
                  <td><input v-model="heatCarbonDust" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>二氧化碳（kg/kWh)</td>
                  <td><input v-model="heatCO2" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>二氧化硫（kg/kWh)</td>
                  <td><input v-model="heatSO2" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>氮氧化物（kg/kWh)</td>
                  <td><input v-model="heatNO" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>PM2.5（kg/kWh)</td>
                  <td><input v-model="heatPM25" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>等效植树（棵/kWh)</td>
                  <td><input v-model="heatTreePlanting" placeholder="- -"></td>
                </tr>
              </table>
            </el-col>
            <el-col :span="8">
              <table style="height: 15vh;">
                <tr>
                  <th colspan="2">发电</th>
                </tr>
                <tr>
                  <td>煤耗量（kg/kWh)</td>
                  <td><input v-model="electricCoalConsumption" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>水耗量（kg/kWh)</td>
                  <td><input v-model="electricWaterConsumption" placeholder="- -"></td>
                </tr>
              </table>
              <table style="height: 15vh;margin-top: 2vh;">
                <tr>
                  <th colspan="2">供热</th>
                </tr>
                <tr>
                  <td>煤耗量（kg/kWh)</td>
                  <td><input v-model="heatCoalConsumption" placeholder="- -"></td>
                </tr>
                <tr>
                  <td>水耗量（kg/kWh)</td>
                  <td><input v-model="heatWaterConsumption" placeholder="- -"></td>
                </tr>
              </table>
            </el-col>
          </el-row>
        </div>
      </div>

    </div>
  </div>


</template>

<script>
  export default {
    data() {
      return {
        project_id: this.$root.project_id,
        form: {
          runmode: '热跟踪模式',
        },
        electricIsAllowed: false,
        heatIsAllowed: false,
        coldIsAllowed: false,
        electricMobility: '',
        heatMobility: '',
        coldMobility: '',
        overload: '',
        lackload: '',
        overheat: '',
        lackheat: '',
        overcool: '',
        lackcool: '',
        electricCarbonDust: '',
        electricCO2: '',
        electricSO2: '',
        electricNO: '',
        electricPM25: '',
        electricTreePlanting: '',
        electricCoalConsumption: '',
        electricWaterConsumption: '',
        heatCarbonDust: '',
        heatCO2: '',
        heatSO2: '',
        heatNO: '',
        heatPM25: '',
        heatTreePlanting: '',
        heatCoalConsumption: '',
        heatWaterConsumption: '',
        electricInput: true,
        heatInput: true,
        coldInput: true
      }
    },
    methods: {
      save() {
        // alert(this.projectId)
        this.$http.post('/iepsapi/planProgram/saveParam', {
          project_id: this.project_id,
          run_mode: this.form.runmode,
          max_over_load: this.overload,
          mxx_lack_load: this.lackload,
          max_over_cooling: this.overcool,
          mxx_lack_cooling: this.lackcool,
          max_over_heat: this.overheat,
          mxx_lack_heat: this.lackheat,
          electricity_carbon_dust: this.electricCarbonDust,
          electricity_co2: this.electricCO2,
          electricity_so2: this.electricSO2,
          electricity_no: this.electricNO,
          electricity_pm25: this.electricPM25,
          electricity_tree_planting: this.electricTreePlanting,
          electricity_coal_consumption: this.electricCoalConsumption,
          electricity_water_consumption: this.electricWaterConsumption,
          heat_carbon_dust: this.heatCarbonDust,
          heat_co2: this.heatCO2,
          heat_so2: this.heatSO2,
          heat_no: this.heatNO,
          heat_pm25: this.heatPM25,
          heat_tree_planting: this.heatTreePlanting,
          heat_coal_consumption: this.heatCoalConsumption,
          heat_water_consumption: this.heatWaterConsumption,
          electricity_load_transfer: {
            is_allowed: this.electricIsAllowed,
            mobility: this.electricMobility
          },
          heat_load_transfer: {
            is_allowed: this.heatIsAllowed,
            mobility: this.heatMobility
          },
          cold_load_transfer: {
            is_allowed: this.coldIsAllowed,
            mobility: this.coldMobility
          }
        }).then((res) => {
          console.log(res);

          if (res.data.flag) {
            this.$message({
              type: 'success',
              message: res.data.message
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.$refs['form'].resetFields();
        }).catch((error) => {
          console.log(error);
        });
      },
      change() {
        this.electricInput = this.electricIsAllowed == 'true' ? false : true;
        this.heatInput = this.heatIsAllowed == 'true' ? false : true;
        this.coldInput = this.coldIsAllowed == 'true' ? false : true;
      }
    }
  }
</script>

<style scoped="scoped">
  .container {
    display: flex;
    flex-direction: column;
  }

  .header {
    position: relative;
    padding: 10px 20px 10px;
    color: #FFF;
    background: #374590;
    text-align: left;
  }

  table {
    margin-left: 4vh;
    width: 80%;
    height: 33vh;
  }

  th {
    text-align: left;
  }

  td {
    text-align: center;
  }

  tr:nth-child(even){
    background: #374590;
  }

  input {
    text-align: center;
    background: none;
    width: 50%;
    height: 90%;
    color: white;
    margin-left: 2vh;
    border: none;
  }

  select {
    width: 80%;
    height: 70%;
  }

  .box1 {
    position: relative;
    width: 100%;
    height: 45%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    height: 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2 {
    position: relative;
    width: 100%;
    height: 45%;
    margin-top: 1vh;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box3 {
    position: relative;
    width: 100%;
    height: 45%;
    margin-top: 1vh;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #fff;
    font-size: 16px;
  }

  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #fff;
    font-size: 16px;
  }

  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #fff;
    font-size: 16px;
  }

  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #fff;
    font-size: 16px;
  }
</style>
